<template>
	<view class="shop-list">
		<view class="shop-title f-color">
			<view class="shop-item"
			v-for="(item,index) in shopList.data" :key="index"
			@tap="changTab(index)"
			>
				<view :class="shopList.currentIndex==index?'f-active-color':''">{{item.name}}</view>
				<view class="shop-icon">
					<view 
					class="iconfont icon-xiangshangjiantou up"
					:class="item.status == 1 ? 'f-active-color':''"
					></view>
					<view 
					class="iconfont icon-xiajiantou down"
					:class="item.status == 2 ? 'f-active-color':''"
					></view>
				</view>
			</view>
			
		</view>
				
		<linex></linex>
		<commondity-list :dataList="commondityList"></commondity-list>
	</view>
	
</template>

<script>
import CommondityList from "@/components/common/CommondityList.vue"	
import linex from "@/components/common/line.vue"
export default{
	props:{
		keyword:String
	},
	components:{
		linex,
		CommondityList
	},
	data(){
		return{
			shopList:{
				currentIndex:0,
				data:[
					{name:"价格",status:1},
					{name:"折扣",status:0},
					{name:"品牌",status:0}
				]
			},
			commondityList:[
				{
					id:1,
					imgUrl:"../../static/img/1.webp",
					name:"ssssssssssssssssssssssss",
					pprice:"229",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:2,
					imgUrl:"../../static/img/2.webp",
					name:"ssssssssssssssssssssssss",
					pprice:"229",
					oprice:"659",
					discount:"5.2"
				}
			]
		}
	},
	methods:{
		changTab(index){
			
			
			// 获取索引值
			let idx = this.shopList.currentIndex
			// 获取索引值对应的对象
			let item = this.shopList.data[idx]
			if(idx == index){
				return item.status = item.status == 1? 2:1
			};
			
			// 新的值
			let newItem = this.shopList.data[index]
			item.status = 0;
			
			this.shopList.currentIndex = index
			newItem.status = 1;
		}
	}
}	
</script>

<style scoped>
.shop-title{
	display: flex;
	
}
.shop-item{
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 80rpx;
}
.shop-icon{
	position: relative;
	margin-left: 10rpx;
}
.iconfont{
	width: 16rpx;
	height: 8rpx;
	position: absolute;
	left: 0;
}
.up{
	top: -24rpx;
}
.down{
	
}
</style>